<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Use time-picker-v2</span>
      <div class="demonstration">Value：{{ value }}</div>

      <div class="time-picker-wrap">
        <el-time-picker-v2
          v-model="value"
          :minutes="['00', '30']"
          value-format="HH:mm"
          default-value="08:00"
        />
      </div>
    </div>

    <div class="block">
      <span class="demonstration">Use time-picker-v2 is-range</span>
      <div class="demonstration">Value：{{ value2 }}</div>

      <div class="time-picker-wrap big">
        <el-time-picker-v2
          v-model="value2"
          is-range
          :minutes="['00', '30']"
          value-format="HH:mm"
          start-default-value="00:00"
          end-default-value="24:00"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('')
const value2 = ref([])
</script>

<style scoped lang="scss">
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.time-picker-wrap {
  width: 200px;
  margin: 0 auto;
  &.big {
    width: 300px;
  }
}
</style>
